<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!-- 加载jquery的入口函数 $(匿名函数) -->
    <script src="./js/jquery-1.12.4.min.js"></script>
    <!-- 记载自己函数,js的入口函数是window.onload() -->
    <script>
        
        // jquery的入口函数，,当文档加载完毕后执行ready中的匿名函数
        $(document).ready(function () {
            console.log("jquery入口函数的完整写法...");
        })

        $(function () {
            console.log("jquery入口函数的化简写法...");
        })

        $(function () {

            // jquery控制css,直接使用css()方法,因为是方法所以直接设置参数即可
            function func1() {
                $("#box").css("width","300px")
                $("#box").css("height","300px")

                $("#box").css({
                    "width": "500px",
                    "height": "500px",
                    "background": "red"
                })
                console.log($("#box").css("width"));
            }

            // jquery事件onclick等方法在jquery中都去掉了on
            // 点击按钮,使div的css隐藏,juqery中只要有对立的方法,都会有第三个toggle来状态切换
            // $('选择器')和css的选择器一样, $('button')意思是button标签选择器
            function func2() {
                $('#btn1').click(function () {

                    // $("div").hide(500)           直接隐藏
                    // $("#box").toggle(500)        切换show/hide
                    // $("#box").fadeToggle()       切换fadeiin/faddeout
                    // $("#box").fadeTo(500, 0.6)   500ms变化到0.6的透明度
                    $("#box").slideToggle()

                    // 设置初始的css位置
                    // $("#box").css({"top": "10px", "opacity": 0})
                    // 设置移动到目标css的属性和时间等动画
                    // $("#box").animate({"top": "50%", "opacity": 1})
                })

                $('#btn2').click(function () {
                    // $("div").show(500)
                    $("#box").toggle(500)
                })
            }

            // jquery控制内容html(参数)方法,只需要传递参数即可 js中使用的是innerHTML
            function func3(params) {
                $("#btn1").html("这是被修改之后的文字")
                console.log($("#btn").html());
            }

            // jquery中的选择器
            function func4() {
                $("#id")            // id选择器
                $("li:first")       // 第一个li标签
                $("li:last")        // 最后一个li标签
                $("li:eq(0)")       // index为0的li标签
                $("li").eq(0)

                $(".box").next()    // 选中类名为box的下一个标签
                $(".box").nextAll()    
                $(".box").prev()    

                $("li[class=box]")  // 选中class等于box的li标签
                $("li[data-xx=jqk]")// data-是自定义选择器,当词穷的时候可以 用

                $('li').not(".box") // 不含有box类名的li标签 
                $("li").has(".box") // 目标是有box类名的li标签
                $("li").find(".box")// 目标是li标签里面带有box类名的子标签
            }

            // sibling() 兄弟姐妹
            function func5() {
                $("button").click(function () {
                    // 点击的button变绿色,其他的按钮变红色
                    $(this).css("background","green").siblings().css("background","")
                })
            }

            // parent() 父类
            function func6() {
                $(".box2 button").click(function () {
                    $(this).parent().hide(500);
                })
            }

            // children() 子类，下拉菜单
            // $(".box3 li").hover(鼠标进入func, 鼠标移出func)
            function func7() {
                $(".box3 li").hover(function () {
                    $(this).children("ul").toggle()
                })
            }

            func2()

            
        })


        // 自己js的入口函数window.onload只能有一个，只执行最后一个window.onload
        // jquery的入口函数$(匿名函数)可以有多个
        window.onload = function () {
            
            function func1() {
                var btn = document.getElementById("btn1")
                var box = document.getElementById("box")

                btn.onclick = function () {
                    box.style.display = "none"
                }
            }
            // func1()
        }
    
    </script>

    <style>
        div {
            width: 200px;
            height: 200px;
            background: #666666;
        }

        div.box3 {
            width: 200px;
            height: 40px;
            background: #666666;
            margin: 10px auto;
        }

        div.box3 ul,li{
            padding: 0;
            margin: 0;
            list-style: none;
        }

        div.box3 ul li{
            background: #666666;
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;

            /* li默认是竖着, 此处是找到2个**一级标题**水平显示 */
            float: left;
        }

        div.box3 li ul {
            display: none;
        }

        div.box3 ul li a{
            text-decoration: none;
            color: #333333;
        }


    </style>
</head>
<body>

    <button id="btn1">隐藏</button>
    <button id="btn2">显示</button>
    <div id="box"></div>

    <ul>
        <!-- jquery自定义选择器data-  -->
        <li data-xx="jqk"></li>
        <li></li>
        <li></li>
    </ul>

    <button>"按钮"</button>
    <button>"按钮"</button>
    <button>"按钮"</button>
    <button>"按钮"</button>
    <button>"按钮"</button>
    <button>"按钮"</button>

    <div class="box2">
        <button>点击关闭广告...</button>
    </div>

    <div class="box3">
        <ul>
            <li>
                <a href="#">男星</a>
                <ul>
                    <li> <a href="#">男星1</a></li>
                    <li> <a href="#">男星2</a></li>
                    <li> <a href="#">男星3</a></li>
                </ul>
            </li>

            <li>
                <a href="#">女星</a>
                <ul>
                    <li> <a href="#">女星1</a></li>
                    <li> <a href="#">女星2</a></li>
                    <li> <a href="#">女星3</a></li>
                </ul>
            </li>
             
        </ul>
    </div>

</body>
</html>